En Andrew Valums´blog he visto un efecto creado con jQuery. El resultado es un menú vertical de imágenes con efecto deslizante. Una discreta información de carga se muestra en la parte superior así como la posibilidad de mostrar un tooltip con transparencia sobre la imagen.
El resultado de todo eso nos lo muestra el autor en el siguiente ejemplo.

Lo que hice fue modificar un poco el ancho, pensando que una sidebar suele medir aproximadamente 220px y lo adapté para unas imágenes de 215 x 100



En plantilla edición de HTML añadimos justo antes de ]]></b:skin>
<style type='text/css'>
div.sc_menu_wrapper {
position: relative;
height: 400px; /* height es la altura debe ser mayor que la altura de una imagen para formar el scrollbar. */
width: 220px; /* width es la anchura que no debe ser superior a la sidebar */
margin-top: 30px;
overflow: auto;
}
div.sc_menu {
padding: 15px 0;
}
.sc_menu a {
display: block;
margin-bottom: 5px;
width: 215px;
border: 2px rgb(79, 79, 79) solid;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;

/* color y fondo efecto hover */
color: #fff;
background: rgb(79, 79, 79);
}
.sc_menu a:hover {
border-color: rgb(130, 130, 130);
border-style: dotted;
}
.sc_menu img {
display: block;
border: none;
}
.sc_menu_wrapper .loading { /* estilos de carga */
position: absolute;
top: 50px;
left: 10px;
margin: 0 auto;
padding: 10px;
width: 100px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
text-align: center;
color: #fff;
border: 1px solid rgb(79, 79, 79);
background: #1F1D1D;
}
.sc_menu_tooltip { /* estilos tooltip */
display: block;
position: absolute;
padding: 6px;
font-size: 12px;
color: #fff;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border: 1px solid rgb(79, 79, 79);
background: rgb(0, 0, 0);
background: rgba(0, 0, 0, 0.5);
}
</style>
En los estilos he añadido lo que podemos cambiar.
Los colores deben ser en rgb.
Sustituimos "Url-enlace" por la url de nuestro enlace y "Url-imagen" por la de nuestras imágenes.

Ahora justo antes de </head> añadimos:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.js' type='text/javascript'/>;

Si ya estamos usando jQuery en la plantilla omitimos el paso anterior.
Copiamos el contenido de este archivo de texto y lo pegamos antes de antes de </head>
Y por último nos queda el HTML, editamos un gadget de HTML y en su interior añadimos:
<div class="sc_menu_wrapper">
<div class="sc_menu">
<a title="Título" href="url-enlace"><img src="Url-imagen" alt=""/></a>
<a title="Título" href="url-enlace"><img src="Url-imagen" alt=""/></a>
<a title="Título" href="url-enlace"><img src="Url-imagen" alt=""/></a>
<a title="Título" href="url-enlace"><img src="Url-imagen" alt=""/></a>
<a title="Título" href="url-enlace"><img src="Url-imagen" alt=""/></a>
</div></div>

Completamos el código anterior añadiendo en title="Título" el texto que se mostrará en el tooltip.
En Url-imagen añadimos la url de cada imagen.
Con Url-enlace lo sustituimos por la url del enlace que vamos a añadir.
Unknown

Que lindo es!!!! :) y has puesto esa comida toda tentadora que lo hace aún más precioso y con una explicación fácil de hacer ;)

Me ha encantado, besos y abrazos ronroneados ^_^

Responder
MexaaC

WOW GEM@!!!!!!!!
Disculpa tengo una duda, como hago para que el texto que sale en el title="TEXO" me aparezca como sale ahi en ese efecto y en otras páginas como gratisfull.com y asi?

Responder
Rapator

Hola Gem@. Solo te escribo para agradecer tu ayuda, tu tiempo y tus trucos, que nos brindas de manera altruista. Si puedes, el dia que sea, pasate por nuestro blog y lo criticas un rato, jejeje
http://losbiciraptors.blogspot.com/
¡Gracias y a aseguir asi!

Responder
J.Guti

Gema se podria hacer el mismo menu pero que se moviese en sentido "horizontal", es decir de izd. a drch

Responder
Unknown

:D Julia está precioso! bien explicado...un encanto...besitos amiga!

Responder
Anónimo

Gema, yo tengo un blog: www.vecerry.blogspot.com y tambien tengo un dominio personal www.vecerry.com.ar
¿Como hago para que mi blog sea .com.ar?

Responder
Gem@

:: Hola Pau !! me alegra que te guste :)
La idea era un menú para un blog de cocina pero es aplicable a cualquier otra cosa.
Besitos ronroneados ;)

:: Caa ese efecto se consigue con jQuery y el plugin que ves en esta entrada, es decir con los scripts, los estilos marcados con /* estilos tooltip */
y añadiendo la etiqueta title :)

:: Bienvenido Rapator, gracias por la invitación :D

:: J.Guti no sabría responderte, imagino que modificando el script de la descarga pero no sé modificarlos :(

:: Graciela me alegra que te guste !! ;)

:: Seba no he tocado ese tema de los dominios en Blogger pero puedes seguir estos pasos de Francisco donde lo explica muy bien en %% Blog and Web en el foro de
%% SpamLoco seguro que también te podrán orientar
;)

Responder
José Romero

Muy interesante, lo probaré

Saludos

Responder
MexaaC

No me funcionó pero muchas gracias por tu ayuda :D

Responder
Abre Paréntesis

buenas gema. oye una cosita a ver si saber resolvermela. Lo que tienes abajo a la derecha la flechita que pone top para subir arriba, como hago para ponerla en mi pagina? pero no con esa funcion sino simplemente lo que quiero hacer es que la cabecera de la pagina se quede inmovil como una capa fija. He visto que tu flecha se queda inmovil aunque subas o bajes el scroll vertical, es decir, que siempre está visible en todo momento en tu blog. Pues querría hacer lo mismo, dejar una capa fija a una parte de la página, me dices como se hacer? he probado con fixed y demás pero no funciona. Gracias espero tu respuesta.

Responder
Gem@

:: Me alegra que te guste Jose M Romero :)

:: Caa no puedo decirte nada si no veo el sitio donde está añadido :S

:: Abre Paréntesis para realizar eso habría que establecer también altura y distancia, esta entrada puede que te sea de ayuda ;)

http://gemablog-.blogspot.com/2009/10/imagen-fija-para-twitter.html

Responder
MexaaC

Intentaba ponerlo en una pagina HTML que yo hize en Dreamweaver y tambien tengo problemas con el favicon? donde te puedo contactar, no me contestas en tu correo :(

Responder
Gem@

:: Caa si no es de Blogger no creo que pueda ayudarte :S
Tengo el correo saturado de mails, los voy respondiendo cuando el tiempo lo permite :(

Responder
MexaaC

Ok está bien, conoces a alguien de confianza que pueda ayudarme?

Responder
Gem@

:: Caa no tengo la menor idea :S

Responder
Abre Paréntesis

Muy buenas Gema tengo una pregunta a ver si sabrias hacer esto.
Estoy haciendo una web trabajo con dreamweaver.
La pagina es muy ancha y alta. Ahora mi pregunta surge porque querria que cada vez que cargas la pagina se viera una parte diferente de ella para que no salga siempre el mismo contenido.
¿Sabrías como hacer para que cada vez que cargues la pagina principal, aparezca una parte diferente de la misma sin tener que mover los scrolls horizontal y vertical? Sabes lo que te quiero decir?
Espero tu respuesta, muchas gracias.

Responder
Antonio Ruiz

Muy buenas Gema!

Un menu interesante para algunos post de esos que me gustan a mí que conduzcan a diferentes lugares de un mismo destino viajero.

Lo aplicaré algún día.

Besos.

Responder
Gem@

:: Abre Paréntesis le respondía a Caa sobre el mismo tema,no tengo conocimientos sobre Dreamweaver :S

:: Saludos Antonio :) es una buena idea, ya me estoy imaginando ese menú con fotografías de paisajes :)

Responder
MexaaC

@Gem@
Ok lo entiendo, aunque no tiene ciencia pero gracias por tu ayuda que nos brindas a todos y claro... No podemos cubrir todo. Dice el dicho "El que mucho abarca, poco aprieta"

Responder
Gem@

:. Imagino que como todo es ponerse Caa pero de Dreamweaver sólo me suena el nombre :(
Oye, date una vuelta por http://oloblogger.blogspot.com/ que allí he visto que preguntaron sobre lo mismo y creo que hay respuesta :D

Responder
MexaaC

Mil Gracias GEM@, y si es posible, como pregunto eso? Disculpa tanta molestia causada

Responder
Nadie

Gracias por contestarme en el otro post, he mirado el enlace y ya he entendido lo del hosting, así que suerte en esta nueva empresa. El menú es muy bonito y mmuy pero que muy apetitoso :0

Responder
Gem@

:: Pues igual que me lo has preguntado a mí, en la última entrada vi que en los comentarios preguntaban sobre un tema relacionado con Dreamweaver por eso te dije que igual Oloman puede orientarte :) Lee los comentarios muchas veces en ellos encontramos respuesta anuestras dudas :)

Responder
~Saradina~

Me encanta :D Igual lo uso para algo...

Besotes

Responder
Junior

HOLA GRACIAS ESTA CHEVERE PERO YO TRATO DE CAMBIAR EL TAMAÑO DE ANCHO PERO NO PUEDO SIEMPRE QUEDA IGUAL ME GUSTARIA TENERLO DEL TAMAÑO ORIGINAL...

Responder
Gem@

:: Junior tendría que ver tu ejemplo online para ver por qué no varía el tamaño una vez lo cambias.

Responder
Victoria Corpas Fernández

Hola Gema, hacía tiempo que estaba buscando esta ayuda.
He puesto los códigos tal y como describes, sin embargo, cada imagen aparece con su tamaño original y muy grande; mi pregunta es: ¿hay alguna forma de que tengan todas el mismo tamaño y de reducirlas?
Gracias.

Responder
Gem@

:: Victoria Corpas Fernández lamento ver tu comentario con tanto retraso, intenté ver si habías solucionado el problema pero tu perfil no está disponible. De todas formas te diré que el tamaño de la imagen también lo podemos adecuar en html :
http://gemablog-.blogspot.com/2007/10/modificar-tamao-de-imgenes-con-html.html

Responder
kimbi-sama

Esto no me queda el menu hago lo que dices pero las imagenes se me quedan quietas y no realizan su efecto si me podrias explicar mas detalladamente te dejo mi msn (julieta_ZyXEL@hotmail.com)
grax de antemano alfin encontre una pagina donde sale de todo :D

Responder
Gem@

:: kimbi-sama para saber donde está el posible error tendría que ver tu ejemplo si no funcionando si añadido en tu blog :)

Responder

Los comentarios han sido inhabilitados temporalmente. ¡GRACIAS!

:):'(:(:P:D:$;):-I:X:O|O:S

Nota: solo los miembros de este blog pueden publicar comentarios.

 


top